<template>
  <div class="main" @click.stop="globalClick">
    <mobile-bar class="bar" v-if="mobileFlag"></mobile-bar>
    <el-dialog title="设置" :visible.sync="dialogVisible">
      <!-- <div slot="header" class="clearfix">
          <div>范 围</div>
        </div> -->
      <el-card class="box-card" style="margin-bottom: 10px">
        <div slot="header" class="clearfix" style="display: flex">
          <div style="width: 20%">试卷范围</div>
          <el-switch
            v-model="scopeValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="margin-left: 70%"
          >
          </el-switch>
        </div>
        <div v-show="this.scopeValue" class="block">
          <div style="margin-left: 50px">
            <el-checkbox-group v-model="checkUsers">
              <!-- <span>{{ index + 1 + "." }}</span> -->
              <div v-for="(user, index) in this.allUsers" :key="user.id">
                <el-checkbox :label="user.id">{{ user.realName }} </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-bottom: 10px">
        <div slot="header" class="clearfix" style="display: flex">
          <div style="width: 20%">允许修改已提交内容</div>
          <el-switch
            v-model="modifyValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="margin-left: 70%"
          >
          </el-switch>
        </div>
        <div style="display: flex">
          <div style="width: 20%">提交后允许查看</div>
          <el-switch
            v-model="viewAfterSubmit"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="margin-left: 70%"
          >
          </el-switch>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-bottom: 10px">
        <div slot="header" class="clearfix" style="display: flex">
          <div style="width: 20%">定时开始结束</div>
          <el-switch
            v-model="endValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="margin-left: 70%"
          >
          </el-switch>
        </div>
        <div v-show="this.endValue" class="block">
          <div style="margin-left: 50px">
            <span class="demonstration">设置开始时间</span>

            <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </div>
          <div style="margin-left: 50px">
            <span class="demonstration">设置截止时间 </span>

            <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </div>
        </div>
      </el-card>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="create()">创 建</el-button>
      </div>
    </el-dialog>

    <div class="types" v-if="!mobileFlag">
      <div class="left-container">
        <div class="left">
          <div class="left-top">问题类型</div>
          <div class="left-center">
            <el-button
              size="mini"
              @click="addQuestion('radio')"
              style="margin-left: 5%; margin-top: 5%"
              >单选题</el-button
            >
            <el-button
              size="mini"
              @click="addQuestion('checkbox')"
              style="margin-left: 5%; margin-top: 5%"
              >多选题</el-button
            >
            <el-button
              size="mini"
              @click="addQuestion('judge')"
              style="margin-left: 5%; margin-top: 5%"
              >判断题</el-button
            >
            <el-button
              size="mini"
              @click="addQuestion('text')"
              style="margin-left: 5%; margin-top: 5%"
              >填空题</el-button
            >
            <el-button
              size="mini"
              @click="addQuestion('texts')"
              style="margin-left: 5%; margin-top: 5%"
              >简答题</el-button
            >
          </div>
          <div class="left-bottom">
            <div class="clearfix">
              <el-button class="fl" style="margin-left: 5%; margin-top: 5%"
                >取消</el-button
              >
              <el-button
                type="primary"
                class="fl"
                style="margin-left: 5%; margin-top: 5%"
                @click="nextSet()"
                >下一步</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-bind:class="{ isMobileShow: mobileFlag, design: !mobileFlag }">
      <div
        v-bind:class="{ mobileContainers: mobileFlag, containers: !mobileFlag }"
      >
        <div slot="header" style="width: 100%; display: flex">
          <div style="width:100%">
            <div
              @click="titleClick"
              v-if="!titleChange"
              style="
                margin-left: 15px;
                font-size: 1.2em;
                word-wrap: break-word;
                width: 50%;
              "
            >
              {{ title }}
            </div>

            <el-input
              style="width: 100%"
              v-if="titleChange"
              v-model="title"
              @blur="onblur"
              @keyup.enter="onsubmit"
              ref="titleInput"
              clearable
              type="textarea"
              autosize
            ></el-input>
            <!-- 表单描述 -->

            <div
              @click="descClick"
              v-if="!descChange"
              style="
                width: 50%;
                word-wrap: break-word;
                margin-left: 15px;
                font-size: 0.8em;
                margin-top: 5px;
                color: #6c848e;
              "
            >
              {{ description }}
            </div>

            <el-input
              style="width: 60%"
              v-if="descChange"
              v-model="description"
              @blur="onblurDesc"
              @keyup.enter="onsubmitDesc"
              ref="descInput"
              clearable
            ></el-input>
          </div>
          <div style="flex: 1"></div>
          <div>
            <div
              style="
                font-size: 2.5em;
                color: #409eff;
                width: 2em;
                font-style: italic;
                margin-right:20px
              "
            >
              {{ this.getPaperScore() }}
            </div>
            <!-- <div style="color:#409eff;width:2em;font-style: italic">==</div> -->
          </div>
        </div>
        <el-divider></el-divider>
        <draggable
          v-model="questionList"
          @start="onStart"
          @end="onEnd"
          animation="600"
          handle=".mover"
        >
          <transition-group>
            <div
              v-for="(question, index) in questionList"
              :key="index"
              class="text item"
            >
              <el-card class="box-card" @click.native.stop="toShow(question)">
                <div class="editCard" v-show="question.editCardShow">
                  <div style="color: #409eff; font-size: 20px; margin-top: 5px">
                    {{ index + 1 + ". " }}
                  </div>
                  <div style="width: 100%">
                    <div style="display: flex; width: 100%">
                      <el-input
                        placeholder="请输入问题"
                        style="width: 70%"
                        v-model="question.content"
                        clearable
                        type="textarea"
                        autosize
                      ></el-input>
                      <!-- <el-button
                        type="primary"
                        icon="el-icon-check"

                        style="margin-left: 20%"
                        @click="closeCard(index)"
                      ></el-button> -->
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        style="margin-left: 20%"
                        @click="delQuestion(index)"
                      ></el-button>
                    </div>
                    <!-- 单选题 -->
                    <el-radio-group
                      v-if="question.questionType == 'radio'"
                      v-model="question.rightOption"
                    >
                      <div
                        v-for="(option, index) in question.choiceList"
                        :key="index"
                        style="display: flex"
                      >
                        <el-input
                          v-model="question.choiceList[index].content"
                          placeholder="请输入选项"
                          style="margin-top: 5%"
                          clearable
                        ></el-input>
                        <div style="margin-top: 5%; display: flex">
                          <el-button
                            size="mini"
                            style="margin-left: 5%"
                            @click="delOption(question.choiceList, index)"
                            >删除</el-button
                          >
                          <el-radio
                            :label="option"
                            style="margin-top: 10px; margin-left: 5%"
                            >设置为正确答案</el-radio
                          >

                          <!-- <span
                            class="el-icon-circle-plus-outline"
                            style="font-size: 20px"
                            @click="addOption(question.choiceList, index)"
                          ></span>
                          <span
                            class="el-icon-remove-outline"
                            style="font-size: 20px"
                            @click="delOption(question.choiceList, index)"
                          ></span> -->
                        </div>
                      </div>
                      <div style="display: flex">
                        <el-button
                          size="mini"
                          style="margin-top: 5%"
                          type="primary"
                          @click="addOption(question.choiceList, index)"
                          >新增选项</el-button
                        >
                        <div>
                          <el-input-number
                            size="small"
                            v-model="question.score"
                            :min="0"
                            style="margin-top: 15%; margin-left: 5%"
                          ></el-input-number>
                        </div>
                      </div>
                    </el-radio-group>

                    <!-- 多选题 -->
                    <el-checkbox-group
                      v-if="question.questionType == 'checkbox'"
                      v-model="question.rightOptions"
                    >
                      <div
                        v-for="(option, index) in question.choiceList"
                        :key="index"
                        style="display: flex"
                      >
                        <el-input
                          v-model="question.choiceList[index].content"
                          placeholder="请输入选项"
                          style="margin-top: 3%; width: 31%"
                          clearable
                        ></el-input>
                        <div style="margin-top: 3%; display: flex">
                          <el-button
                            size="mini"
                            style="margin-left: 5%"
                            @click="delOption(question.choiceList, index)"
                            >删除</el-button
                          >
                          <el-checkbox
                            :label="option"
                            style="margin-top: 10px; margin-left: 5%"
                            >设置为正确答案</el-checkbox
                          >
                        </div>
                        <!-- <div
                        class="el-icon-circle-plus-outline"
                        style="font-size: 20px"
                        @click="addOption(question.choiceList, index)"
                      ></div>
                      <div
                        class="el-icon-remove-outline"
                        style="font-size: 20px"
                        @click="delOption(question.choiceList, index)"
                      ></div> -->
                      </div>
                      <div style="display: flex">
                        <el-button
                          size="mini"
                          style="margin-top: 3%"
                          type="primary"
                          @click="addOption(question.choiceList, index)"
                          >新增选项</el-button
                        >

                        <div>
                          <el-input-number
                            size="small"
                            v-model="question.score"
                            :min="0"
                            style="margin-top: 15%; margin-left: 3%"
                          ></el-input-number>
                        </div>
                      </div>
                    </el-checkbox-group>

                    <!-- 判断题 -->
                    <div v-if="question.questionType == 'judge'">
                      <div style="display: flex; margin-top: 3%">
                        <div>设置正确答案：</div>
                        <el-radio-group
                          v-model="question.correct"
                          style="margin-top: 2px"
                        >
                          <el-radio :label="'yes'">正确</el-radio>
                          <el-radio :label="'no'">错误</el-radio>
                        </el-radio-group>
                      </div>
                      <div style="display: flex">
                        <div style="margin-top: 4%">设置分值：</div>
                        <div>
                          <el-input-number
                            size="small"
                            v-model="question.score"
                            :min="0"
                            style="margin-top: 15%; margin-left: 3%"
                          ></el-input-number>
                        </div>
                      </div>
                    </div>

                    <!-- 填空题 -->
                    <div v-if="question.questionType == 'text'">
                      <div
                        v-for="(rightAnswer, index) in question.rightAnswers"
                        :key="index"
                      >
                        <div style="display: flex; margin-top: 3%">
                          <div style="margin-top: 2%">设置填空题答案：</div>
                          <el-input
                            class="under"
                            v-model="question.rightAnswers[index]"
                            style="margin-left: 3%; width: 31%"
                            clearable
                          ></el-input>
                          <el-button
                            size="mini"
                            style="margin-left: 1%"
                            @click="delText(question.rightAnswers, index)"
                            >删除</el-button
                          >
                        </div>

                        <!-- <div
                        class="el-icon-circle-plus-outline"
                        style="font-size: 20px"
                        @click="addText(question.rightAnswers, index)"
                      ></div>
                      <div
                        class="el-icon-remove-outline"
                        style="font-size: 20px"
                        @click="delOption(question.rightAnswers, index)"
                      ></div> -->
                      </div>
                      <div style="display: flex">
                        <el-button
                          size="mini"
                          style="margin-top: 3%"
                          type="primary"
                          @click="addText(question.rightAnswers, index)"
                          >新增填空</el-button
                        >
                        <el-input-number
                          size="small"
                          v-model="question.score"
                          :min="0"
                          style="margin-top: 3%; margin-left: 3%"
                        ></el-input-number>
                      </div>
                    </div>
                    <!-- 简答题 -->
                    <div
                      v-if="question.questionType == 'texts'"
                      style="margin-top: 3%"
                    >
                      <div style="display: flex">
                        <el-button size="mini" @click="addTextsRowNum(question)"
                          >添加行数</el-button
                        >
                        <el-button
                          size="mini"
                          style="margin-left: 3%"
                          @click="decreaseTextsRowNum(question)"
                          >减少行数</el-button
                        >
                        <el-input-number
                          size="small"
                          v-model="question.score"
                          :min="0"
                          style="margin-left: 3%"
                        ></el-input-number>
                      </div>
                      <div style="margin-top: 3%">设置简答题答案：</div>
                      <el-input
                        type="textarea"
                        :rows="question.rowNum"
                        placeholder="请输入内容"
                        v-model="question.correct"
                        style="margin-top: 3%"
                        clearable
                      >
                      </el-input>
                    </div>
                    <div></div>
                  </div>
                </div>
                <div class="showCard mover" v-show="!question.editCardShow">
                  <div style="display: flex; margin-left: 20px">
                    <div
                      style="
                        color: #409eff;
                        margin-bottom: 8px;
                        font-size: 18px;
                      "
                    >
                      <div
                        v-if="question.questionType == 'radio'"
                        style="width: 90px"
                      >
                        {{ index + 1 + ". " + "单选题" }}
                      </div>
                      <div
                        v-if="question.questionType == 'checkbox'"
                        style="width: 90px"
                      >
                        {{ index + 1 + ". " + "多选题" }}
                      </div>
                      <div
                        v-if="question.questionType == 'judge'"
                        style="width: 90px"
                      >
                        {{ index + 1 + ". " + "判断题" }}
                      </div>
                      <div
                        v-if="question.questionType == 'text'"
                        style="width: 90px"
                      >
                        {{ index + 1 + ". " + "填空题" }}
                      </div>
                      <div
                        v-if="question.questionType == 'texts'"
                        style="width: 90px"
                      >
                        {{ index + 1 + ". " + "简答题" }}
                      </div>
                    </div>
                    <div style="flex: 1"></div>
                    <div style="color: #ffcd41; margin-right: 10%; width: 90px">
                      {{ "（分值：" + question.score + "）" }}
                    </div>

                    <!-- <el-button style="float: right; padding: 3px 0" type="text"
                >删除</el-button
              > -->
                  </div>
                  <div
                    style="
                      font-size: 15px;
                      margin-left: 2em;
                      word-wrap: break-word;
                    "
                  >
                    {{ question.content }}
                  </div>

                  <!-- 单选题 -->
                  <el-radio-group
                    v-if="question.questionType == 'radio'"
                    v-model="question.rightOption"
                    style="margin-left: 20px"
                  >
                    <!-- <span>{{ index + 1 + "." }}</span> -->
                    <div
                      v-for="(option, index) in question.choiceList"
                      :key="index"
                    >
                      <el-radio
                        :label="option"
                        style="
                          margin-top: 10px;
                          margin-left: 1em;
                          white-space: pre-wrap;
                        "
                        >{{ question.choiceList[index].content }}

                        <span
                          class="el-icon-check right"
                          v-if="
                            question.rightOption.content ==
                            question.choiceList[index].content
                          "
                          >正确答案
                        </span>
                      </el-radio>
                    </div>
                  </el-radio-group>
                  <!-- 多选题 -->
                  <el-checkbox-group
                    v-if="question.questionType == 'checkbox'"
                    v-for="(option, index) in question.choiceList"
                    :key="index"
                    v-model="question.rightOptions"
                    style="margin-left: 20px"
                  >
                    <!-- <span>{{ index + 1 + "." }}</span> -->
                    <div>
                      <el-checkbox
                        :label="option"
                        style="
                          margin-top: 10px;
                          margin-left: 1em;
                          white-space: pre-wrap;
                        "
                        >{{ question.choiceList[index].content
                        }}<span
                          class="el-icon-check right"
                          v-if="
                            question.rightOptions.indexOf(
                              question.choiceList[index]
                            ) >= 0
                          "
                          >正确答案
                        </span>
                      </el-checkbox>
                    </div>
                  </el-checkbox-group>

                  <!-- 判断题 -->
                  <div
                    v-if="question.questionType == 'judge'"
                    style="margin-top: 10px; margin-left: 2em"
                  >
                    <el-radio-group v-model="question.correct">
                      <el-radio :label="'yes'"
                        >正确
                        <span
                          class="el-icon-check right"
                          v-if="question.correct == 'yes'"
                          >正确答案
                        </span></el-radio
                      >

                      <el-radio :label="'no'" style="margin-left: 10px"
                        >错误
                        <span
                          class="el-icon-check right"
                          v-if="question.correct == 'no'"
                          >正确答案
                        </span>
                      </el-radio>
                    </el-radio-group>
                  </div>

                  <!-- 填空题 -->
                  <div
                    v-if="question.questionType == 'text'"
                    v-for="(rightAnswer, index) in question.rightAnswers"
                    :key="index"
                    style="margin-left: 2em"
                  >
                    <el-input
                      v-model="question.rightAnswers[index]"
                      :disabled="true"
                      placeholder="暂无设置答案"
                      style="margin-top: 10px"
                    ></el-input>
                  </div>

                  <!-- 简答题 -->
                  <div
                    v-if="question.questionType == 'texts'"
                    style="margin-left: 2em"
                  >
                    <el-input
                      type="textarea"
                      :rows="question.rowNum"
                      v-model="question.correct"
                      placeholder="暂无设置答案"
                      :disabled="true"
                      style="margin-top: 10px"
                    >
                    </el-input>
                  </div>
                </div>
              </el-card>
            </div>
          </transition-group>
        </draggable>
        <div style="height: 10vh"></div>
      </div>
    </div>
    <div class="mobileTypes" v-if="mobileFlag" v-show="!mobileTypeShow">
      <span
        class="el-icon-view"
        style="margin-left: 6%; margin-top: 5%; color: #409eff"
        @click="preview()"
        >预览</span
      >
      <el-button
        type="primary"
        plain
        style="margin-left: 8%; margin-top: 5%"
        @click.stop="addMobileShow()"
        >添加问题</el-button
      >
      <el-button
        type="primary"
        style="margin-left: 18%; margin-top: 5%"
        @click="nextSet()"
      >
        下一步
      </el-button>
    </div>
    <div class="mobileType" v-show="mobileTypeShow">
      <div style="margin-left: 5%; margin-top: 5%">问题类型：</div>
      <el-divider></el-divider>
      <el-button
        size="mini"
        @click="addQuestion('radio')"
        style="margin-left: 5%; margin-top: 5%"
        >单选题</el-button
      >
      <el-button
        size="mini"
        @click="addQuestion('checkbox')"
        style="margin-left: 5%; margin-top: 5%"
        >多选题</el-button
      >
      <el-button
        size="mini"
        @click="addQuestion('judge')"
        style="margin-left: 5%; margin-top: 5%"
        >判断题</el-button
      >
      <el-button
        size="mini"
        @click="addQuestion('text')"
        style="margin-left: 5%; margin-top: 5%"
        >填空题</el-button
      >
      <el-button
        size="mini"
        @click="addQuestion('texts')"
        style="margin-left: 5%; margin-top: 5%"
        >简答题</el-button
      >
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";

import axios from "axios";
import MobileBar from "./MobileBar.vue";

let _ = require("lodash");
export default {
  components: {
    draggable,
    MobileBar,
  },
  name: "Create",
  props: {
    msg: String,
  },
  data() {
    return {
      mobileTypeShow: false,
      mobileFlag: false,
      updateFlag: 0,
      onEndFlag: 0,
      drag: false,
      timer: null,
      id: null,
      title: "期末考试",
      description: "--描述--",
      titleChange: false,
      descChange: false,
      titleValue: "期末考试",
      descValue: "-描述-",
      questionList: [],
      checkUsers: [],
      endTime: "2022-02-02 22:00:00",
      startTime: "2021-02-02 22:00:00",
      createTime: "",
      dialogVisible: false,
      modifyValue: true,
      allUsers: [],
      viewAfterSubmit: true,
      scopeValue: false,
      endValue: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  watch: {
    update: function () {
      this.saveTest();
    },
    // onEndFlag:function(){
    //   this.onlySave();
    // }

    // deep:true,
  },
  methods: {
    nextSet() {
      if (this.mobileFlag) {
        this.$router.push({
          path: "/createSet",
          query: {
            id: this.id,
          },
        });
      } else {
        this.dialogVisible = true;
      }
    },
    // onlySave(){
    //   const _this = this;

    //   let datas = JSON.stringify(this.getLastTest());
    //   console.log(this.getLastTest());

    //     axios({
    //       method: "post",
    //       url: _this.APIurl.apiUrl.domainName + "examPaper/save",
    //       headers: {
    //         "Content-Type": "application/json",
    //       },
    //       data: datas,
    //     });
    // },
    saveTest: _.debounce(function () {
      const _this = this;

      let datas = JSON.stringify(this.getLastTest);

      // axios({
      //   method: "post",
      //   url: _this.APIurl.apiUrl.domainName + "examPaper/update",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: datas,
      // });

      // else {

      axios({
        method: "post",
        url: _this.APIurl.apiUrl.domainName + "examPaper/save",
        headers: {
          "Content-Type": "application/json",
        },
        data: datas,
      }).then(function (response) {
        console.log("iiiiiiiiiiiiiiiiiiiiiii" + response.data.data);
        _this.id = response.data.data.id;
        console.log("shhhhhhhhhhhhhhhhh" + _this.id);
        _this.title = response.data.data.title;
        let cardFlag = [];
        _this.questionList.forEach((question) => {
          cardFlag.push(question.editCardShow);
        });
        _this.description = response.data.data.description;

        _this.questionList = response.data.data.questionList;
        _this.questionList.forEach((question, index) => {
          if (cardFlag[index]) {
            _this.$set(question, "editCardShow", true);
          } else {
            _this.$set(question, "editCardShow", false);
          }

          if (question.questionType == "radio") {
            _this.$set(question, "rightOption", "");
            // question.rightOption="";
            question.choiceList.forEach((choice) => {
              if (choice.rightAnswer) {
                question.rightOption = choice;
              }
            });
          }
          if (question.questionType == "checkbox") {
            _this.$set(question, "rightOptions", []);
            question.choiceList.forEach((choice) => {
              if (choice.rightAnswer) {
                question.rightOptions.push(choice);
              }
            });
          }
          if (question.questionType == "text") {
            _this.$set(question, "rightAnswers", []);

            question.rightAnswers = question.correct.split("_");
          }
          // if (question.questionType == "judge") {
          //   if (question.currect == "yes") {
          //     question.currect = "正确";
          //   } else if (question.currect == "no") {
          //     question.currect = "错误";
          //   }
          // }
        });
      });
      this.$message({
        message: "已 自 动 保 存",
        type: "success",
      });
    }, 2000),
    create() {
      
      const _this = this;
      let datass = JSON.stringify(this.getLastTest);    
      axios({
        method: "post",
        url: _this.APIurl.apiUrl.domainName + "examPaper/save",
        headers: {
          "Content-Type": "application/json",
        },
        data: datass,
      });

      let datas = {};
      if (this.scopeValue) {
        datas.userIds = this.checkUsers;
        datas.examPaperId = this.id;

        axios({
          method: "post",
          url: this.APIurl.apiUrl.domainName + "examPaper/selectPeople",
          headers: {
            "Content-Type": "application/json",
          },
          data: datas,
        });
      }

      this.$router.push("/homepage");
    },
    getPaperScore() {
      let paperScore = 0;
      this.questionList.forEach((question) => {
        paperScore = paperScore + question.score;
      });
      return paperScore;
    },

    getLastTest() {
      let lastTest = {};
      lastTest.id = this.id;
      lastTest.createUserId = sessionStorage.getItem("id");
      lastTest.questionCount = this.questionList.length;
      lastTest.score = this.getPaperScore();
      lastTest.title = this.title;
      lastTest.description = this.description;
      this.questionList.questionCount = this.questionList.length;
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[i].questionType == "radio") {
          for (let j = 0; j < this.questionList[i].choiceList.length; j++) {
            if (
              this.questionList[i].choiceList[j] ==
              this.questionList[i].rightOption
            ) {
              this.questionList[i].choiceList[j].rightAnswer = true;
            }
          }
        }
        if (this.questionList[i].questionType == "checkbox") {
          for (let j = 0; j < this.questionList[i].choiceList.length; j++) {
            if (
              this.questionList[i].rightOptions.includes(
                this.questionList[i].choiceList[j]
              )
            ) {
              this.questionList[i].choiceList[j].rightAnswer = true;
            }
          }
        }
        if (this.questionList[i].questionType == "text") {
          this.questionList[i].correct =
            this.questionList[i].rightAnswers.join("_");
          this.questionList[i].rowNum =
            this.questionList[i].rightAnswers.length;
        }
        // if (this.questionList[i].questionType == "judge") {
        //   if ((this.questionList[i].correct = "正确")) {
        //     this.questionList[i].correct = "yes";
        //   } else if ((this.questionList[i].correct = "错误")) {
        //     this.questionList[i].correct = "no";
        //   }
        // }
      }
      lastTest.questionList = this.questionList;
      return lastTest;
    },
    addTextsRowNum(question) {
      question.rowNum++;
    },
    decreaseTextsRowNum(question) {
      if (question.rowNum <= 3) {
        return;
      } else {
        question.rowNum--;
      }
    },
    addMobileShow() {
      this.mobileTypeShow = true;
    },

    toShow(question) {
      console.log(question.editCardShow);
      question.editCardShow = true;

      console.log(question.id);
      console.log(question.editCardShow);
    },
    addOption(choiceList, index) {
      choiceList.push({ content: "新增选项", rightAnswer: false, id: null });
    },
    addText(choiceList, index) {
      choiceList.splice(index + 1, 0, "");
    },
    delOption(choiceList, index) {
      if (choiceList.length <= 2) {
        return;
      } else {
        choiceList.splice(index, 1);
      }
    },
    delText(choiceList, index) {
      if (choiceList.length <= 1) {
        return;
      } else {
        choiceList.splice(index, 1);
      }
    },
    delQuestion(index) {
      this.questionList.splice(index, 1);
    },

    addQuestion(questionType) {
      if (questionType === "radio") {
        let addQuestion = {
          questionType: "radio",
          content: "请输入问题",
          choiceList: [
            { content: "选项1", rightAnswer: false, id: null },
            { content: "选项2", rightAnswer: false, id: null },
          ],
          id: null,
          editCardShow: true,
          rightOption: "",
          score: 5,
          correct: "",
        };
        this.questionList.push(addQuestion);
      } else if (questionType === "checkbox") {
        let addQuestion = {
          questionType: "checkbox",
          content: "请输入问题",
          id: null,
          choiceList: [
            { content: "选项1", rightAnswer: false, id: null },
            { content: "选项2", rightAnswer: false, id: null },
          ],
          editCardShow: true,
          rightOptions: [],
          score: 5,
          correct: "",
        };
        this.questionList.push(addQuestion);
      } else if (questionType === "text") {
        let addQuestion = {
          questionType: "text",
          content: "请输入问题",
          id: null,
          anwsers: [""],
          rightAnswers: [""],
          editCardShow: true,
          rowNum: 1,
          score: 5,
          correct: "",
        };
        this.questionList.push(addQuestion);
      } else if (questionType === "judge") {
        let addQuestion = {
          questionType: "judge",
          content: "请输入问题",
          id: null,
          editCardShow: true,
          score: 5,
          correct: "",
        };
        this.questionList.push(addQuestion);
      } else {
        let addQuestion = {
          questionType: "texts",
          content: "请输入问题",
          id: null,
          correct: "",
          rowNum: 3,
          editCardShow: true,
          score: 5,
        };
        this.questionList.push(addQuestion);
      }
      for (let i = 0; i < this.questionList.length; i++) {
        this.questionList[i].orderNum = i;
      }
    },
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
      this.onEndFlag++;
      this.questionList.forEach((question, index) => {
        question.orderNum = index;
      });
      console.log(
        "adssssssssssssssssssssssssssssssssssssssssssssssss" + this.onEndFlag
      );
    },
    //设置禁止拖拽
    setJY() {
      this.disabled = true;
    },
    //设置启用拖拽
    setQY() {
      this.disabled = false;
    },

    onblur() {
      this.title = this.title.trim();
      if (this.title === "") {
        this.title = this.titleValue;
      }
      this.titleChange = false;
    },
    onsubmit() {
      this.title = this.title.trim();
      if (this.title === "") {
        this.title = this.titleValue;
      }
      this.titleChange = false;
    },
    titleClick() {
      this.titleChange = !this.titleChange;
      setTimeout(() => {
        this.$refs.titleInput.focus();
      }, 150);
    },
    onblurDesc() {
      this.description = this.description.trim();
      if (this.description === "") {
        this.description = this.descValue;
      }
      this.descChange = false;
    },
    onsubmitDesc() {
      this.description = this.description.trim();
      if (this.description === "") {
        this.description = this.descValue;
      }
      this.descChange = false;
    },
    descClick() {
      this.descChange = !this.descChange;
      setTimeout(() => {
        this.$refs.descInput.focus();
      }, 150);
    },
    globalClick(e) {
      let flag = false;
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[i].editCardShow == true) {
          flag = true;
        }
        this.questionList[i].editCardShow = false;
      }
      if (flag) {
        this.updateFlag++;
      }
      this.mobileTypeShow = false;
      console.log(this.questionList);
      console.log(this.getLastTest);
      console.log("aaaaaaaaaaaaaaaaaaaaaaaaaa");
      console.log(this.checkUsers);
      // if (e.target.className != "show"){

      //   if(this.questionList.length>0){
      //     for(let i=0;i<this.questionList.length;i++){
      //     questionList[i].editCardShow=false
      //     console.log(this.questionList)
      //   }
      //   }

      // }
    },
    preview() {
      if (this.id) {
        this.$router.push({
          path: "/preview",
          query: {
            id: this.id,
          },
        });
      }
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
  },
  mounted() {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    this.mobileFlag = flag;

    const _this = this;
    axios
      .get(_this.APIurl.apiUrl.domainName + "user/findAll")
      .then(function (response) {
        _this.allUsers = response.data.data;
        console.log(_this.allUsers);
      });

    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      axios
        .get(_this.APIurl.apiUrl.domainName + "examPaper/findById/" + _this.id)
        .then(function (response) {
          _this.title = response.data.data.title;
          _this.description = response.data.data.description;
          _this.questionList = response.data.data.questionList;
          _this.questionList.forEach((question) => {
            _this.$set(question, "editCardShow", false);
            if (question.questionType == "radio") {
              _this.$set(question, "rightOption", "");
              // question.rightOption="";
              question.choiceList.forEach((choice) => {
                if (choice.rightAnswer) {
                  question.rightOption = choice;
                }
              });
            }
            if (question.questionType == "checkbox") {
              _this.$set(question, "rightOptions", []);
              question.choiceList.forEach((choice) => {
                if (choice.rightAnswer) {
                  question.rightOptions.push(choice);
                }
              });
            }
            if (question.questionType == "text") {
              _this.$set(question, "rightAnswers", []);

              question.rightAnswers = question.correct.split("_");
            }
            // if (question.questionType == "judge") {
            //   if (question.currect == "yes") {
            //     question.currect = "正确";
            //   } else if (question.currect == "no") {
            //     question.currect = "错误";
            //   }
            // }
          });
          console.log("asddddddddddddd" + _this.questionList);
        });
    }
  },

  computed: {
    update: function () {
      return (
        this.updateFlag +
        this.title +
        this.description +
        this.onEndFlag 
      );
    },
    getLastTest: function () {
      var aa = JSON.parse(sessionStorage.getItem("user"));

      let lastTest = {};
      if (this.endValue) {
        lastTest.endTime = this.dateFormat(
          "YYYY-mm-dd HH:MM:SS",
          new Date(this.endTime)
        );
        lastTest.startTime = this.dateFormat(
          "YYYY-mm-dd HH:MM:SS",
          new Date(this.startTime)
        );
      }

      lastTest.viewAfterSubmit = this.viewAfterSubmit;
      lastTest.userName = aa.username;
      lastTest.selectPeople = this.scopeValue;
      console.log(aa.username);
      lastTest.id = this.id;
      lastTest.createUserId = sessionStorage.getItem("id");
      lastTest.questionCount = this.questionList.length;
      lastTest.score = this.getPaperScore();
      lastTest.title = this.title;
      lastTest.description = this.description;
      this.questionList.questionCount = this.questionList.length;
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[i].questionType == "radio") {
          for (let j = 0; j < this.questionList[i].choiceList.length; j++) {
            if (
              this.questionList[i].choiceList[j] ==
              this.questionList[i].rightOption
            ) {
              this.questionList[i].choiceList[j].rightAnswer = true;
            } else {
              this.questionList[i].choiceList[j].rightAnswer = false;
            }
          }
        }
        if (this.questionList[i].questionType == "checkbox") {
          for (let j = 0; j < this.questionList[i].choiceList.length; j++) {
            if (
              this.questionList[i].rightOptions.includes(
                this.questionList[i].choiceList[j]
              )
            ) {
              this.questionList[i].choiceList[j].rightAnswer = true;
            } else {
              this.questionList[i].choiceList[j].rightAnswer = false;
            }
          }
        }
        if (this.questionList[i].questionType == "text") {
          this.questionList[i].correct =
            this.questionList[i].rightAnswers.join("_");
          this.questionList[i].rowNum =
            this.questionList[i].rightAnswers.length;
        }
        // if (this.questionList[i].questionType == "judge") {
        //   if ((this.questionList[i].correct = "正确")) {
        //     this.questionList[i].correct = "yes";
        //   } else if ((this.questionList[i].correct = "错误")) {
        //     this.questionList[i].correct = "no";
        //   }
        // }
      }
      lastTest.questionList = this.questionList;
      return lastTest;
    },
  },
  // computed: {
  //   getLastTest: function () {
  //     var aa=JSON.parse(sessionStorage.getItem("user"));

  //     let lastTest = {};
  //     lastTest.userName=aa.username;
  //     console.log(aa.username);
  //     lastTest.id = this.id;
  //     lastTest.createUserId = sessionStorage.getItem("id");
  //     lastTest.questionCount = this.questionList.length;
  //     lastTest.score = this.getPaperScore();
  //     lastTest.title = this.title;
  //     lastTest.description = this.description;
  //     this.questionList.questionCount = this.questionList.length;
  //     for (let i = 0; i < this.questionList.length; i++) {
  //       if (this.questionList[i].questionType == "radio") {
  //         for (let j = 0; j < this.questionList[i].choiceList.length; j++) {
  //           if (
  //             this.questionList[i].choiceList[j] ==
  //             this.questionList[i].rightOption
  //           ) {
  //             this.questionList[i].choiceList[j].rightAnswer = true;
  //           }
  //         }
  //       }
  //       if (this.questionList[i].questionType == "checkbox") {
  //         for (let j = 0; j < this.questionList[i].choiceList.length; j++) {
  //           if (
  //             this.questionList[i].rightOptions.includes(
  //               this.questionList[i].choiceList[j]
  //             )
  //           ) {
  //             this.questionList[i].choiceList[j].rightAnswer = true;
  //           }
  //         }
  //       }
  //       if (this.questionList[i].questionType == "text") {
  //         this.questionList[i].correct =
  //           this.questionList[i].rightAnswers.join("_");
  //         this.questionList[i].rowNum =
  //           this.questionList[i].rightAnswers.length;
  //       }
  //       // if (this.questionList[i].questionType == "judge") {
  //       //   if ((this.questionList[i].correct = "正确")) {
  //       //     this.questionList[i].correct = "yes";
  //       //   } else if ((this.questionList[i].correct = "错误")) {
  //       //     this.questionList[i].correct = "no";
  //       //   }
  //       // }
  //     }
  //     lastTest.questionList = this.questionList;
  //     return lastTest;
  //   },
  // },
  // mounted: function() {

  //     let flag=this.questionList.length>0
  //     if(true){
  //       console.log(this.questionList.length)

  //     }
  //      console.log(flag)
  //     document.addEventListener("click", function (e) {
  //       console.log(this.questionList)
  //       if(this.questionList){
  //       if (e.target.className != "show") {
  //         console.log(this.questionList.length)
  //         for(let i=0;i<this.questionList.length;i++){
  //           this.questionList[i].editCardShow=false
  //           console.log('aaaaa')
  //         }
  //       }
  //       }
  //     });
  //   }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  padding-top: 5px;
  width: 100%;
  height: 95%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #ffffff;
}

.types button {
  display: block;
}
.design button {
  display: block;
}
.types {
  width: 17%;
  height: 90vh;
  padding-right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.design {
  width: 60%;
  height: 90vh;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.containers {
  width: 100%;
  height: 95%;
  overflow: auto;
  border: 2px solid rgba(116, 115, 115, 0.12);
  border-radius: 10px;
  padding: 20px;
}
.mobile-containers {
  width: 100%;
  height: 95%;
  overflow: auto;
  border: 2px solid rgba(116, 115, 115, 0.12);
  border-radius: 10px;
}
.left-container {
  border: 2px solid rgba(116, 115, 115, 0.12);
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  height: 95%;
}
.fl {
  float: left;
}
.right {
  border-radius: 2px;
  background: #41b883;
  color: white;
  margin-left: 15px;
}
.fr {
  float: right;
}

.clearFixed:after {
  content: "";
  display: block;
  clear: both;
}

* {
  margin: 0;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ol,
ul,
li {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}
.left-top {
  margin-left: 10px;
}
.left-center {
  margin-top: 5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.left-bottom {
  margin-top: 55vh;
}
.editCard {
  display: flex;
}
.under {
  border: none;
}
.mobileTypes {
  position: fixed;
  bottom: 0px;
  background: #fdfdfd;
  height: 10%;
  width: 100%;
  z-index: 999;
  border: 2px solid rgba(116, 115, 115, 0.12);
}
.mobileType {
  position: fixed;
  bottom: 0px;
  background: #fdfdfd;
  height: 30%;
  width: 100%;
  z-index: 999;
  border: 2px solid rgba(116, 115, 115, 0.12);
  border-radius: 10px;
}
.isMobileShow {
  width: 100%;
  margin-top: 20%;
}
</style>